<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task02</title>
  <style>
    /* 居中显示 */
    .bg {
      position: relative;
      width: 300px;
      height: 100px;
      margin: 0 auto;
      background-color: pink;
    }
    .center_1 {
      width: 200px;
      height: 50px;
      background-color: skyblue;
      margin: 20px auto;
      text-align: center;
    }
    .center_2 {
      position: absolute;
      width: 200px;
      height: 50px;
      background-color: rebeccapurple;
      left: 50%;
      margin-left: -100px;
      text-align: center;
    }
    .center_3 {
      position: absolute;
      width: 200px;
      height: 50px;
      background-color: gold;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
    /* 创建动画 */
    .box {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 200px auto;
      background-color:gray;
      animation: move ease 5s infinite;
    }
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(500px);
      }
      50% {
        transform: translate(500px,500px);
      }
      75% {
        transform: translate(0,500px);
      }
      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>
  <!-- 水平居中 -->
  <div class="bg">
    <p class="center_1">水平居中方法一，设置margin值</p>
  </div>
  <div class="bg">
    <p class="center_2">水平居中方法二，绝对定位设置left和margin值</p>
  </div>
  <div class="bg">
    <p class="center_3">水平居中方法三，绝对定位设置left值和tranform值</p>
  </div>
  <!-- 元素移动 -->
  <div class="box">
  </div>
</body>
</html>